<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px">
      <el-col :span="4">
        <el-select
          v-model="query.supplierName"
          placeholder="请选择合作商"
          style="width: 250px"
          filterable
          clearable
        >
          <el-option
            v-for="supplierName in supplierNameList"
            :label="supplierName.text"
            :value="supplierName.value"
            :key="supplierName.value"
          />
          <!--<el-option label="美博" value="美博"/>
          <el-option label="安徽乐京电器有限公司" value="安徽乐京电器有限公司"/>-->
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="query.partnerName"
          placeholder="请选择供货商"
          style="width: 250px"
          filterable
          clearable
        >
          <el-option
            v-for="partner in partnerList"
            :label="partner.text"
            :value="partner.value"
            :key="partner.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="query.proceedCompany"
          placeholder="请选择收款公司"
          style="width: 250px"
          filterable
          clearable
        >
          <el-option
            v-for="proceedCompany in proceedCompanyList"
            :label="proceedCompany.text"
            :value="proceedCompany.value"
            :key="proceedCompany.value"
          />
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="getList"
        >{{ $t('table.search') }}</el-button>
      </el-col>
    </el-row>

    <span v-if="showList">暂无打款的分销商</span>
    <span v-else>
      <el-row :gutter="25">
        <el-col v-for="tale in talelist" :span="8" :key="tale" class="tab">
          <el-card shadow="hover" class="mgb20" style="height:300px;position: relative;">
            <el-tabs :stretch="true" value="fourth" @tab-click="handleClick">
              <el-tab-pane :value="tale.disId" label="总数据" name="fourth"/>
              <el-tab-pane :value="tale.disId" label="本月数据" name="second"/>
              <el-tab-pane :value="tale.disId" label="上月数据" name="third"/>
              <el-tab-pane :value="tale.disId" label="昨日数据" name="first"/>
            </el-tabs>
            <el-row>
              <el-col :span="24">
                <div
                  style="height:160px;position: relative; text-align:center; line-height: 160px;"
                >
                  <div
                    v-if="dataEntity[tale.disId].showTal"
                    style="float:left; width:19%;text-align:center; border-right:1px solid #e3e7ea;"
                  >
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 10px;"
                    >分销商名称</p>
                    <p
                      style="height:80px;position: relative; text-align:center; line-height: 1.25;font-weight:bold;"
                    >{{ dataEntity[tale.disId].disName }}</p>
                  </div>
                  <div
                    v-else
                    style="float:left; width:33%;text-align:center; border-right:1px solid #e3e7ea;"
                  >
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 10px;"
                    >分销商名称</p>
                    <p
                      style="height:80px;position: relative; text-align:center; line-height: 1.25;font-weight:bold;"
                    >{{ dataEntity[tale.disId].disName }}</p>
                  </div>

                  <div
                    v-if="dataEntity[tale.disId].showTal"
                    style="float:left; width:27%;text-align:center;border-right:1px solid #e3e7ea;"
                  >
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 10px;"
                    >
                      <i class="el-icon-info"/>
                    </p>
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 10px;"
                    >打款金额</p>
                    <p
                      style="height:30px;position: relative; text-align:center; line-height: 10px;"
                    >
                      <span
                        style="font-weight:bold;"
                      >{{ formatterRmb(dataEntity[tale.disId].getAmount?dataEntity[tale.disId].getAmount:0) }}</span>
                    </p>
                  </div>
                  <div
                    v-else
                    style="float:left; width:33%;text-align:center; border-right:1px solid #e3e7ea;"
                  >
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 10px;"
                    >
                      <i class="el-icon-info"/>
                    </p>
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 10px;"
                    >打款金额</p>
                    <p
                      style="height:30px;position: relative; text-align:center; line-height: 10px;"
                    >
                      <span
                        style="font-weight:bold;"
                      >{{ formatterRmb(dataEntity[tale.disId].getAmount?dataEntity[tale.disId].getAmount:0) }}</span>
                    </p>
                  </div>

                  <div
                    v-if="dataEntity[tale.disId].showTal"
                    style="float:left; width:27%;text-align:center;border-right:1px solid #e3e7ea;"
                  >
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 15px;"
                    >
                      <i class="el-icon-info"/>
                    </p>
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 15px;"
                    >发货金额</p>
                    <p
                      style="height:30px;position: relative; text-align:center; line-height: 15px;"
                    >
                      <span
                        style="font-weight:bold;"
                      >{{ formatterRmb(dataEntity[tale.disId].sendAmount?dataEntity[tale.disId].sendAmount:0) }}</span>
                    </p>
                  </div>
                  <div v-else style="float:left; width:33%;text-align:center;">
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 15px;"
                    >
                      <i class="el-icon-info"/>
                    </p>
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 15px;"
                    >发货金额</p>
                    <p
                      style="height:30px;position: relative; text-align:center; line-height: 15px;"
                    >
                      <span
                        style="font-weight:bold;"
                      >{{ formatterRmb(dataEntity[tale.disId].sendAmount?dataEntity[tale.disId].sendAmount:0) }}</span>
                    </p>
                  </div>

                  <div
                    v-if="dataEntity[tale.disId].showTal"
                    style="height:160px;position: relative; text-align:center; line-height: 160px;"
                  >
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 40px;"
                    >
                      <i class="el-icon-info"/>
                    </p>
                    <p
                      style="height:40px;position: relative; text-align:center; line-height: 40px;"
                    >剩余金额</p>
                    <p
                      style="height:30px;position: relative; text-align:center; line-height: 40px;"
                    >
                      <span
                        style="font-weight:bold;"
                      >{{ formatterRmb((dataEntity[tale.disId].getAmount?dataEntity[tale.disId].getAmount:0)-(dataEntity[tale.disId].sendAmount?dataEntity[tale.disId].sendAmount:0)) }}</span>
                    </p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </span>
  </div>
</template>

<script>
import { selectGroupByDis } from '@/api/payment'
import { getPartnerInfo } from '@/api/shipment'
// import { parseTime, pickerOptions } from '@/utils'
import {
  GetCurrMouthStr,
  GetLastMouthStr,
  GetBeforOrAfterDayStr
} from '@/utils/timeUtils'
// import axios from 'axios'

export default {
  data() {
    return {
      showList: false,
      talelist: null,
      listLoading: true,
      query: {
        starTime: null,
        endTime: null,
        disId: null,
        partnerName: null,
        proceedCompany: null,
        supplierName: null
      },
      dataEntity: null,
      supplierNameList: [
        {
          text: '美博',
          value: '美博'
        },
        {
          text: '星城',
          value: '星城'
        },
        {
          text: '北京盛世',
          value: '北京盛世'
        }
      ],
      proceedCompanyList: [
        {
          text: '深圳唯修汇科技有限公司',
          value: '深圳唯修汇科技有限公司'
        },
        {
          text: '浙江扳手科技有限公司',
          value: '浙江扳手科技有限公司'
        }
      ],
      partnerList: []
    }
  },
  created() {
    this.getPartnerInfo()
    this.getList()
  },
  methods: {
    getPartnerInfo() {
      // 查询合作商信息
      getPartnerInfo()
        .then(response => {
          if (response.data.status === 'ok') {
            this.partnerList = response.data.data
          } else {
            console.log('合作商加载失败！')
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    formatterRmb(paymentAmount) {
      if (paymentAmount) {
        var num = paymentAmount
        num = parseFloat(num).toFixed(2)
        return '￥' + num // 返回的是字符串23,245.12保留2位小数
      } else {
        return '￥0.00'
      }
    },
    // 查询收款信息
    getList() {
      this.query.disId = null
      this.query.starTime = null
      this.query.endTime = null
      this.listLoading = true
      selectGroupByDis(this.query).then(response => {
        if (response.data.data !== null) {
          this.talelist = response.data.data
          this.dataEntity = []
          for (var index in this.talelist) {
            this.dataEntity[this.talelist[index].disId] = this.talelist[index]
          }

          const items = this.dataEntity
          this.dataEntity = items.map(v => {
            this.$set(v, 'showTal', true)
            return v
          })
          console.info(this.dataEntity)
          if (this.talelist.length > 0) {
            this.showList = false
          } else {
            this.showList = true
          }
        } else {
          this.showList = true
        }
        this.listLoading = false
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleClick(tab, event) {
      console.info(tab.$attrs.value)
      switch (tab.name) {
        case 'first':
          this.query.starTime = GetBeforOrAfterDayStr(-1) + ' 00:00:00'
          this.query.endTime = GetBeforOrAfterDayStr(-1) + ' 23:59:59'
          this.query.disId = tab.$attrs.value
          this.selectById(false)
          break
        case 'second':
          this.query.starTime = GetCurrMouthStr(1) + ' 00:00:00'
          this.query.endTime = GetCurrMouthStr(2) + ' 23:59:59'
          this.query.disId = tab.$attrs.value
          this.selectById(false)
          break
        case 'third':
          this.query.starTime = GetLastMouthStr(1) + ' 00:00:00'
          this.query.endTime = GetLastMouthStr(2) + ' 23:59:59'
          this.query.disId = tab.$attrs.value
          this.selectById(false)
          break
        case 'fourth':
          this.query.starTime = null
          this.query.endTime = null
          this.query.disId = tab.$attrs.value
          this.selectById(true)
          break
        default:
          console.log(5)
      }
    },

    selectById(flg) {
      var vm = this
      selectGroupByDis(this.query).then(response => {
        debugger
        if (response.data.data.length > 0) {
          var list = response.data.data
          for (var index in list) {
            var key = list[index].disId
            const ob = {}
            ob[key] = list[index]
            ob[key].showTal = flg
            vm.dataEntity = Object.assign({}, vm.dataEntity, ob)
          }
        } else {
          const ob = {}
          ob[vm.query.disId] = {
            sendAmount: 0,
            getAmount: 0,
            disName: vm.dataEntity[vm.query.disId].disName,
            showTal: flg
          }
          vm.dataEntity = Object.assign({}, vm.dataEntity, ob)
          console.info(vm.dataEntity)
        }
        console.info(vm.dataEntity)
      })
    }
  }
}
</script>
<style type="text/css">
.tab {
  box-shadow: 8px 7px 5px #d0cfcf;
  margin-bottom: 20px;
}
.tab:last-child {
  margin-bottom: 0;
}
.tab p {
  font-size: 14px;
}
</style>
